<template>
  <div>

    <mk-search-box>
      <el-row>
        <el-col :span="5">
          <label class="input_top_label">员工姓名:</label>
          <el-input v-model="ui.searchData.realname"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label class="input_top_label">联系电话:</label>
          <el-input v-model="ui.searchData.phone"
                    size="small"></el-input>
        </el-col>
        <el-col :span="3">
          <mk-search-buttons v-model="ui.searching" />
        </el-col>
      </el-row>

    </mk-search-box>
    <el-row>
      <el-col :span="24">
        <mk-button :type="0"
                   icon="el-icon-plus"
                   @click="showDialog()">新增员工</mk-button>

      </el-col>
    </el-row>

    <mk-table v-model="ui"
              mk-index
              mk-sql-code="cpUser.select_list_usertype0"
              mk-table-id="cp-user.userlist.common"
              ref="table">
      <el-table-column prop="realname"
                       label="姓名"
                       width="80"
                       align="left" />
      <el-table-column prop="phone"
                       label="联系方式"
                       width="100"
                       align="left" />
      <el-table-column prop="doing"
                       label="操作"
                       align="center"
                       width="150">
        <template slot-scope="scope">
          <mk-button :type="4"
                     @click="showDialog(scope.row)">编辑</mk-button>
          <mk-button :type="4"
                     confirm-text="确定删除？"
                     @click="deleteUserData(scope)">删除</mk-button>
        </template>
      </el-table-column>
    </mk-table>
    <user-form v-if="dialogVisible"
               :visibles="dialogVisible"
               @close="closeDialog"
               :userInfo="form.userInfo" />
  </div>
</template>

<script>
import { MkBase } from 'element-ui'
import userForm from './user-form'

export default {
  mixins: [MkBase],
  data () {
    return {
      ui: {
        searching: false, // 搜索栏 正在加载
        searchData: {
          realname: '',
          phone: ''
        }
      },
      dialogVisible: false,
      list_datas: {}, // 列表数据
      form: {
        // 表格数据
        userInfo: null
      },
      search: {
        // 搜索数据
        realname: null,
        phone: null
      },
      // 角色数据
      treeData: []
    }
  },
  components: {
    userForm
  },
  mounted: function () {
    this.search_data()
  },
  methods: {

    // 筛选
    search_data () {
      this.ui.searching = true
    },
    /**
     * 显示或者隐藏对话框
     *
     * show:制定对话框显示隐藏
     * clickWhich:点击确定还是取消
     * userInfo:返回的用户信息
     * scope:传给对话框的信息
     */
    showDialog: async function (row) {
      if (row && row.userid) {
        let data = await this.$get('/user/cpRoleidList.json', {
          userid: row.userid
        })
        if (data) {
          row.roleid = data.roleid
          row.rolename = data.rolename
        }
        this.form.userInfo = row
      } else {
        // 点击了新增按钮
        this.form.userInfo = {}
      }
      this.dialogVisible = true
    },
    closeDialog (flag) {
      this.dialogVisible = false
      if (flag) {
        this.search_data()
      }
    },
    // 删除员工
    deleteUserData: async function (data) {
      // 获取员工userid
      let userid = data.row.userid

      let self = this
      try {
        let resourceList = await this.$delete(`/user/${userid}/del.json`)
        // 删除成功
        if (resourceList) {
          if (resourceList.result >= 0) {
            // 再次刷新列表
            self.search_data()
            this.$message('删除成功!')
          }
        }
      } catch (e) {
        alert(e.message)
      }
    }
  },
  props: {
    userType: {
      default: '0'
    },
    userState: {
      default: '1'
    }
  }
}
</script>
